<template>
  <van-form @submit="onSubmit">
    <template v-for="item in formList" :key="item.model">
      <!-- 输入框 -->
      <I-Input
        v-if="item.type === 'input' && shouldShowField(item)"
        v-model="formData[item.model]"
        :label="item.label"
        :placeholder="item.placeholder"
        :rules="item.rules"
      />

      <!-- 密码 -->
      <I-Input
        v-if="item.type === 'password' && shouldShowField(item)"
        v-model="formData[item.model]"
        :label="item.label"
        :type="item.type"
        :placeholder="item.placeholder"
        :rules="item.rules"
      />

       <!-- 验证码 -->
      <I-Input 
        v-if="item.type === 'msger' && shouldShowField(item)"
        v-model="formData[item.model]"
        :label="item.label"
        :placeholder="item.placeholder"
        :rules="item.rules"
      >
        <template #button>
          <van-button 
            size="small" 
            class="msger font-bold" 
            @click="handleGetMsger" 
            type="primary"
            :disabled="countdown > 0"
          >
            {{ countdown > 0 ? `请等待${countdown}s` : '获取验证码' }}
          </van-button>
        </template>
      </I-Input>

      <!-- 文本域 -->
      <I-Input
        v-if="item.type === 'textarea' && shouldShowField(item)"
        v-model="formData[item.model]"
        :label="item.label"
        :placeholder="item.placeholder"
        :rules="item.rules"
        type="textarea"
      />
      

      <!-- 单选框 -->
      <I-Radio
        v-if="item.type === 'radio' && shouldShowField(item)"
        v-model="formData[item.model]"
        :label="item.label"
        :itemList="item.options"
        :rules="item.rules"
      />

      <!-- 复选框 -->
      <I-Checkbox
        v-if="item.type === 'checkbox' && shouldShowField(item)"
        v-model="formData[item.model]"
        :label="item.label"
        :itemList="item.options"
        :rules="item.rules"
      />

      <!-- 日期选择 -->
      <IDatePicker
        v-if="item.type === 'date' && shouldShowField(item)"
        v-model="formData[item.model]"
        :label="item.label"
        :placeholder="item.placeholder"
        :rules="item.rules"
      />

      <!-- 选择器 -->
      <I-Picker
        v-if="item.type === 'select' && shouldShowField(item)"
        v-model="formData[item.model]"
        :label="item.label"
        :placeholder="item.placeholder"
        :columns="formatPickerOptions(item.options)"
        :rules="item.rules"
        :columns-field-names="{ text: 'label', value: 'value' }"
      />
    </template>

    <div>
      <van-button plain hairline block  class="main-button font-bold " type="default" native-type="submit">
        {{ submitText }}
      </van-button>
    </div>
  </van-form>
</template>

<script setup name="IFormComponent">
import { ref, reactive, watch, onUnmounted } from 'vue'


const emit = defineEmits(['submit'])

const props = defineProps({
  list: {
    type: Array,
    required: true,
    default: () => []
  },
  submitText: {
    type: String,
    default: '提交'
  },
  modelValue: {
    type: Object,
    default: () => ({})
  },
  handleGetMsger: {
    type: Function,
    default: () => () => {}
  }
})

const formList = ref(props.list)
const formData = reactive({})

console.log(props.submitText)

// 监听 modelValue 变化，更新表单数据
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal) {
      Object.assign(formData, JSON.parse(JSON.stringify(newVal)))
    }
  },
  { immediate: true, deep: true }
)

// 格式化选择器选项
const formatPickerOptions = (options) => {
  if (!Array.isArray(options)) return []
  return options
}

// 判断是否应该显示字段
const shouldShowField = (item) => {
  if (!item.showCondition) return true
  return item.showCondition(formData)
}

// 提交表单
const onSubmit = () => {
  emit('submit', formData)
}
// 短信验证
// const getMsger = () => {
//   emit('getMsger', formData)
// }

const countdown = ref(0)
const timer = ref(null)

const handleGetMsger = async function () {
  if (countdown.value > 0) return
  try {
    // 调用父组件方法并等待结果
    const result = await props.handleGetMsger(formData)
    console.log(result, '---------------')
    // 如果父组件返回成功结果，才开始倒计时
    if (result) {
      countdown.value = 60
      timer.value = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
          clearInterval(timer.value)
          timer.value = null
        }
      }, 1000)
    }
  } catch (error) {
    console.error('获取验证码失败:', error)
  }
}

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
})
</script>

<style scoped>

/* 使用:deep()进行样式穿透 */
:deep(.van-cell) {
  background: transparent;
  border-bottom: 0.5px solid #fff;
}
:deep(.van-cell:after) {
  border-bottom-color: transparent !important;
}
:deep(.van-cell input) {
  padding: 5px 5px !important;
  color: #fff;
}
:deep(.van-cell input::-webkit-input-placeholder){   /* 使用webkit内核的浏览器 */
	color: #999;
}


:deep(.van-field__error-message){
  margin-left: 20px;
}
.msger{
  background: #4b505d;
  border: 0;
  border-radius: 0 !important;
}
.main-button{
  margin-top: 40px;
  background: transparent;
  color: #fff;
}
.main-button::after{
  border-radius: 0 !important;
}
:deep(.van-field__body input:-internal-autofill-selected){   /* 使用webkit内核的浏览器 */
  background-color: transparent !important;
}


</style>